<template>
    <div class="store-apply-wrap" :class="{'padding-top44': isIphoneXSeres() && (isHKHW || isHKHW != 'false')}">
        <div class="store-apply" v-if="applyMsg && Object.keys(applyMsg).length > 0">
            <div class="store-apply-top positionR" v-if="swiperContent && Array.isArray(swiperContent.list) && swiperContent.list.length > 0">
                <img-video-swiper
                    :swiperContentProp="swiperContent"
                ></img-video-swiper>
            </div>
            <div class="apply-top-wicon displayFlex justifyCtBwt">
                <span>
                    <img v-if="!isHKHW || isHKHW == 'false'" class="apply-top-icon apply-back" @click="goBack" src="../../assets/images/common/back_white_icon.png" alt="">
                </span>
                <span>
                    <img class="apply-top-icon apply-share" @click="goShare" src="../../assets/images/commonActModel/right_side_share.png" alt="">
                </span>
            </div>
            <div class="store-apply-cotent" v-if="applyMsg.mould && applyMsg.mould.contents">
                <img v-for="contentsValue in applyMsg.mould.contents" class="width-full displayBlock" v-lazy="contentsValue.url" alt="">
            </div>
            <div class="button-wrap displayFlex flexCenter width-full">
                <button class="button" @click="showLoginVerify=true">申请入驻</button>
            </div>
        </div>
        <login-verify v-if="showLoginVerify"
                      ref="loginVerify"
                      :pickerProps="pickerMsg"
                      @closePhoneAlert="showLoginVerify=false"
                      @choiseProvince="getPickerMsg"></login-verify>
        <wx-share-body v-if="applyMsg.shareBody && Object.keys(applyMsg.shareBody).length > 0" :shareBody="applyMsg.shareBody"></wx-share-body>
        <v-share v-if="isShare" @clickFn="isShare=false"></v-share>
    </div>
</template>

<script>
    import ImgVideoSwiper from '../../components/commonComponents/swiperComponent/ImgVideoSwiper';
    import common from '../../assets/js/common/commonMethods'
    import Vue from 'vue';
    document.addEventListener('WeixinJSBridgeReady', function(){
        if(Vue.prototype.isIphone){
            setTimeout(()=>{
                $("video").each(function (index,ele) {
                    $("video").eq(index)[0].play();
                    setTimeout(()=>{
                        $('video').eq(index)[0].pause();
                    },10)
                });
            },500)
        }
    });
    export default {
        name: "Apply",
        data(){
            return {
                showLoginVerify: false,//是否弹出手机注册框
                swiperContent:{},//
                isShare:false,
                isHKHW:false,//是否在好看好玩里面
                pickerMsg:{},
                systemStyle:'',
                applyMsg: {
                    // shareBody:{
                    //     "title":"",
                    //     "photo":"",
                    //     "content":"",
                    //     "link":"test.haokanhaowan.cn/store/apply?isHKHW=true&storeId=112",
                    // }
                }
            }
        },
        created(){
            this.isHKHW = this.$route.query && this.$route.query.isHKHW || false;
            this.systemStyle = this.$route.query && this.$route.query.ttn || 6; //0系统 1os零售 2商城h5 3os渠道 5好看好玩 6好看好玩h5 10珠宝易
        },
        mounted(){
            this.init();
        },
        methods:{
            init(){
                this.getApplyMsg();
            },
            getApplyMsg(){
                let query = '';
                let that = this;
                let url= `${this.NW_API_API_LOCALE_VERSION}/agent/open/store/apply`;
                if(this.$route.query){
                    if(this.$route.query.storeId){
                        url += `${this.hrefHasQuery(url)}storeId=${this.$route.query.storeId}`;
                    }
                    if(this.$route.query.mouldId){
                        url += `${this.hrefHasQuery(url)}mouldId=${this.$route.query.mouldId}`;
                    }

                }
                this.xurl.get(url).then((data)=>{
                    if(data.success){
                        this.applyMsg = data.result;
                        let tempObj = {
                            content:'商家入驻邀请',
                        };
                        this.applyMsg.shareBody = Object.assign({},this.applyMsg.shareBody,tempObj);
                        this.dealHeadsMeidio(this.applyMsg.mould);
                    }
                });
            },
            goBack(){
                if(this.isHKHW == true || this.isHKHW == 'true' || this.systemStyle == 5){
                    /*安卓ios返回上一页*/
                    if(this.isIphone){
                        window.webkit.messageHandlers.Close.postMessage("Close");
                    }else if(this.isAndroid){
                        window.htmlInteracAndroid.goBack()
                    }
                }else{
                    this.$router.go(-1);
                }
            },
            goShare(){
                /*是否在好看好玩里面*/
                if(this.isHKHW == true || this.isHKHW == 'true' || this.systemStyle == 5){
                    /*安卓ios分享*/
                    if(this.isIphone){
                        window.webkit.messageHandlers.share.postMessage(JSON.stringify(this.applyMsg.shareBody));
                    }else if(this.isAndroid){
                        window.htmlInteracAndroid.goToOS(JSON.stringify(this.applyMsg.shareBody));
                    }
                    /*是否在os零售中*/
                }else if(this.systemStyle == 1){
                    /*TODO 等待客户端给方法*/
                    if(this.isIphone){
                    }else if(this.isAndroid){
                    }
                }else{
                    this.isShare=true;
                }
            },
            getPickerMsg(){
                if( Object.keys(this.pickerMsg).length == 0 ){
                    let url = `${this.NW_API_API_LOCALE_VERSION}/area/list`;
                    this.xurl.getLoading(url).then((data)=>{
                        if(data.success){
                            this.pickerMsg = data;
                            this.$refs.loginVerify.pickerShowFn(true);
                        }else if(data.errMsg){
                            this.$root.$emit('toast',{msg:data.errMsg});
                        }else{
                            this.$root.$emit('toast',{msg:'获取省份信息失败'});
                        }
                    });
                }else{
                    this.$refs.loginVerify.pickerShowFn(true);
                }

            },
            dealHeadsMeidio(msg) {
                for(let value in msg.heads){
                    if(msg.heads[value].mediaType == 'Img'){
                        msg.heads[value].mediaType = 1
                    }else if(msg.heads[value].mediaType == 'Video'){
                        msg.heads[value].mediaType = 0
                    }
                }
                this.swiperContent.list = [];
                this.swiperContent.list = msg.heads;
            },
            dealContentsMeidio(){
            }
        },
        components:{
            'login-verify':()=>import('../../components/commonActModel/loginVerify/LoginVerifyV1'),
            'img-video-swiper':ImgVideoSwiper,
            'wx-share-body': () => import('../../components/wx/WxShareBody'),
            "v-share":()=>import("../../components/commonComponents/share/Share"),

        }
    }
</script>

<style scoped lang="scss">

    .store-apply-top{
        width: 100%;
        height: 2rem;
        overflow: hidden;
    }
    .button{
        width: 3.45rem;
        height: .5rem;
        text-align: center;
        line-height: .5rem;
        font-size: .16rem;
        letter-spacing: .03rem;
        background-color:#5D89E8 ;
        -webkit-border-radius: .08rem;
        -moz-border-radius: .08rem;
        border-radius: .08rem;
        color: #fff;
    }
    .button-wrap{
        position: fixed;
        bottom: .15rem;
        z-index: 2;
    }
    .apply-top-wicon{
        padding: 0 .15rem;
        position: fixed;
        top: .15rem;
        left: 0;
        z-index: 2;
        width: 100%;
        box-sizing: border-box;
    }
    .apply-top-icon{
        width: .2rem;
        height: .2rem;
        position: relative;
        z-index: 1;
    }
</style>